<template>
  <div class="article-detail">
    <!-- 文章标题（空值保护） -->
    <h1 class="article-title">{{ article.title || '文章加载中...' }}</h1>

    <!-- 文章元信息（仅在数据存在时显示） -->
    <div class="article-meta" v-if="article.createTime && article.views">
      <span><i class="el-icon-date"></i> {{ article.createTime }}</span>
      <span><i class="el-icon-view"></i> 阅读量：{{ article.views }}</span>
    </div>

    <!-- 文章内容（Markdown解析，空值保护） -->
    <div 
      class="article-content" 
      v-if="article.content" 
      v-html="parsedContent"
    ></div>

    <!-- 评论区（仅在文章ID和评论加载完成后渲染） -->
    <div class="comment-section" v-if="article.id ">
      <h3>评论（{{ comments.length }}条）</h3>
      <template>
        <div class="comment-list">
          <el-card v-for="item in comments" :key="item.id" class="comment-item">
            <div class="comment-user">
              <i class="el-icon-user"></i> {{ item.user }}
              <span class="comment-time">{{ item.time }}</span>
            </div>
            <p class="comment-content">{{ item.content }}</p>
          </el-card>
        </div>
      </template>


      <!-- 评论提交表单（增强验证规则） -->
      <el-form 
        :model="commentForm" 
        :rules="commentRules" 
        ref="commentForm" 
        class="comment-form"
      >
        <el-form-item prop="content">
          <el-input 
            type="textarea" 
            placeholder="请输入评论内容（至少5字）" 
            v-model="commentForm.content" 
            :rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button 
            type="primary" 
            @click="submitComment"
          >
            提交评论
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { marked } from 'marked'  // 直接引入（新版本无需commonjs语法）

export default {
  data() {
    return {
      article: {},  // 文章详情
      comments: [], // 评论列表
      commentForm: { content: '' }, // 评论表单
      commentRules: {  // 增强的表单验证规则
        content: [
          { 
            required: true, 
            message: '评论内容不能为空', 
            trigger: ['blur', 'change'] 
          },
          { 
            type: 'string',  // 显式声明字符串类型验证
            min: 5, 
            max: 500, 
            message: '评论长度需在5-500字之间', 
            trigger: 'blur' 
          }
        ]
      },
      commentsLoaded: false  // 评论区加载状态（防止数据未加载时渲染）
    }
  },

  async created() {
    const articleId = this.$route.params.id

    if (!articleId) {
      this.$message.error('文章ID错误')
      this.commentsLoaded = true  // 标记加载完成（避免界面卡住）
      return
    }
    // 调用方法获取文章详情（异步请求）
    await this.fetchArticleDetail(articleId)

    // 调用方法获取评论列表（异步请求）
    await this.fetchComments(articleId)

  },

  computed: {
    parsedContent() {
      if (!this.article.content) return ''  // 空值保护
      marked.setOptions({ breaks: true })  // 启用换行解析
      return marked(this.article.content)  // 直接调用marked函数（修复版本兼容问题）
    }
  },

  methods: {
    /**
     * 获取文章详情（调用后端接口）
     */
     async fetchArticleDetail(articleId) {
      try {
        // 发送 GET 请求获取文章详情
        const res = await request.get(`/articles/${articleId}`)
        // 将接口返回的数据赋值给响应式变量 article
        this.article = res.data
      } catch (error) {
        console.error('获取文章详情失败:', error)
      }
    },
        /**
     * 获取评论列表（调用后端接口）
     */
     async fetchComments(articleId) {
      try {
        // 发送 GET 请求获取评论列表（假设接口返回文章的评论数组）
        const res = await request.get(`/articles/${articleId}`)
        // 将接口返回的评论数组赋值给响应式变量 comments
        this.comments = res.data.comments || []
      } catch (error) {
        console.error('获取评论失败:', error)
      }
    },
    // 提交评论（核心修复：使用PATCH请求，正确处理响应数据）
    async submitComment() {
      this.$refs.commentForm.validate(async valid => {
        if (!valid) return  // 表单验证不通过则终止

        const articleId = this.$route.params.id
        const newComment = {
          id: Date.now(),         // 生成唯一ID（时间戳）
          content: this.commentForm.content,
          user: '游客',          // 简化处理（实际应取登录用户）
          time: new Date().toLocaleString()  // 当前时间（格式：2025/5/14 12:00:00）
        }

        try {
          // 使用PATCH请求更新文章的comments字段（仅修改需要的部分）
          const res = await request.patch(`/articles/${articleId}`, {
            comments: [...this.article.comments, newComment]  // 追加新评论到原列表
          })

          // 从响应中获取最新的文章数据，更新评论列表
          this.article = res.data  // 更新文章对象（包含最新comments）
          this.comments = this.article.comments  // 同步评论列表
          this.commentForm.content = ''  // 清空表单
          this.$message.success('评论提交成功！')
          console.log('提交后comments:', this.comments);
        } catch (error) {
          console.error('评论提交失败:', error)
          this.$message.error('评论提交失败，请稍后重试')
        }
      })
    }
  }
}
</script>





<style scoped lang="scss">
.article-detail {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px;

  .article-title {
    color: #303133;
    font-size: 32px;
    margin-bottom: 20px;
  }

  .article-meta {
    color: #909399;
    font-size: 14px;
    margin-bottom: 30px;
    
    span {
      margin-right: 20px;
      i {
        margin-right: 5px;
        vertical-align: middle;  /* 图标垂直居中 */
      }
    }
  }

  .article-content {
    line-height: 1.8;
    color: #606266;

    h1, h2, h3 {
      margin: 25px 0 15px;
      color: #303133;
    }

    pre {
      background: #f8f8f8;
      padding: 15px;
      border-radius: 4px;
      overflow-x: auto;  /* 长代码滚动 */
    }

    code {
      background: #f8f8f8;
      padding: 2px 5px;
      border-radius: 3px;
      font-size: 0.9em;
    }
  }

  .comment-section {
    margin-top: 50px;

    h3 {
      color: #303133;
      font-size: 20px;
      margin-bottom: 20px;
    }

    .comment-list {
      .comment-item {
        padding: 15px;
        background: #fafafa;
        border-radius: 4px;
        margin-bottom: 15px;

        .comment-user {
          color: #909399;
          font-size: 14px;
          margin-bottom: 8px;

          .comment-time {
            margin-left: 15px;
            font-size: 12px;
            color: #c0c4cc;
          }
        }

        .comment-content {
          color: #606266;
          line-height: 1.6;
        }
      }
    }

    .comment-form {
      max-width: 600px;

      .el-input__inner {
        min-height: 100px;
        border-radius: 4px;
      }
    }
  }
}
</style>